<!--
 * @Date: 2019-11-11 10:48:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-14 17:14:35
 * @describe: --
 -->
<template>
  <el-card shadow="never" class="aui-card--fill"  ref="fromc">
    <div class="mod-sys__user">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  ref="froma">
        <el-form-item>
          <el-input v-model="dataForm.username" placeholder="账号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.realName" placeholder="经纪人姓名" clearable></el-input>
        </el-form-item>
        
        <el-form-item>
          <ren-select v-model="dataForm.gender" dict-type="gender" :placeholder="$t('user.gender')"></ren-select>
        </el-form-item>
        <el-form-item>
          <ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :query="true"></ren-dept-tree>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$hasPermission('sys:user:save')"
            type="primary"
            @click="addOrUpdateHandle()"
          >{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$hasPermission('sys:user:delete')"
            type="danger"
            @click="deleteHandle()"
          >{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$hasPermission('sys:user:export')"
            type="info"
            @click="exportHandle()"
          >{{ $t('export') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        :height="autoTabHeight"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%;"        
        @row-dblclick="tableRowDbclick"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
       <el-table-column
          prop="imgUrl"
          label="头像"
          header-align="center"
          align="center"
          width="140"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.headUrl" class="table_img">
              <img :src="scope.row.headUrl" alt srcset />
            </div>
            <div v-else class="imgNull">头像拍摄中</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="姓名"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          :label="$t('user.deptName')"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="userRoleName" label="职位" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column
          prop="email"
          :label="$t('user.email')"
          header-align="center"
          align="center"
        ></el-table-column>-->
        <el-table-column
          prop="mobile"
          :label="$t('user.mobile')"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gender"
          :label="$t('user.gender')"
          sortable="custom"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ $getDictLabel("gender", scope.row.gender) }}</template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('user.status')"
          sortable="custom"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === 0"
              size="small"
              type="danger"
            >{{ $t('user.status0') }}</el-tag>
            <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          :label="$t('user.createDate')"
          sortable="custom"
          header-align="center"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPermission('sys:user:update')"
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id)"
            >{{ $t('update') }}</el-button>
            <el-button
              v-if="$hasPermission('sys:user:delete')"
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id)"
            >{{ $t('delete') }}</el-button>
            <el-button type="primary" @click="distribution(scope.row.id)">分配</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ZWbox"></div>
      <div class="paginationBox">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        ></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!-- 分配弹窗 -->
      <el-dialog :visible.sync="outUserVisible" title="分配" :destroy-on-close="true" width="353px">
        <el-form :inline="true" ref="UserResourceForm" :model="UserResourceForm" label-width="80px">
          <el-form-item label="类型：">
            <el-select v-model="UserResourceForm.type" class="FormSelect" style="width:100%">
              <el-option label="房源维护人" value="2"></el-option>
              <el-option label="房源实勘人" value="3"></el-option>
              <el-option label="房源视频人" value="4"></el-option>
              <el-option label="房源钥匙人 " value="5"></el-option>
              <el-option label="房源备件人" value="6"></el-option>
              <el-option label="房源服务人" value="7"></el-option>
              <el-option label="客源维护人" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门">
            <el-cascader
              class="w100"
              v-model="deptSelectVal"
              :options="this.$store.state.DeptList"
              :show-all-levels="false"
              @change="deptIdChange"
              :props="deptProps"
              ref="myCascader"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="人员">
            <el-select
              v-model="UserResourceForm.userId"
              placeholder="人员"
              clearable
              class="w100"
              :disabled="UserResourceForm.deptId==''"
            >
              <el-option
                v-for="item in maintainList"
                :key="item.id"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button @click="outUserVisible = false">{{ $t('cancel') }}</el-button>
          <el-button type="primary" @click="distributionFun()">{{ $t('confirm') }}</el-button>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./user-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/sys/user/page",
        getDataListIsPage: true,
        deleteURL: "/sys/user",
        deleteIsBatch: true,
        exportURL: "/sys/user/export",
      },
      dataForm: {
        username: "",
        realName: "",
        deptId: "",
        gender: "",
      },
      outUserVisible: false,
      deptSelectVal: "",
      UserResourceForm: {
        type: "",
        oldUserId: "",
        userId: "",
        deptId: "",
      },
      deptProps: {
        value: "id",
        label: "name",
        checkStrictly: true,
      },
      outUserVisible: false,
      maintainList: this.$store.state.maintainList,
    };
  },
  components: {
    AddOrUpdate,
  },
  created() {
    this.$nextTick(() => {
      this.autoWidth();
    });
  },
  mounted() {
    let _this = this;
    window.onresize = function () {
      _this.autoWidth();
    };
  },
  methods: {
    autoWidth() {
      let that = this;
      let formh = that.$refs.froma.$el.offsetHeight;
      let h = that.$refs.fromc.$el.offsetHeight;
      let heightStyle = h - formh - 45;
      that.autoTabHeight = heightStyle;
    },
    //行双击
    tableRowDbclick(row) {
      this.$router.push({
        name: "userdetails",
        query: {
          ID: row.id,
        },
      });
    },
    //资源分配
    distribution(id) {
      this.UserResourceForm.oldUserId = id;
      this.outUserVisible = true;
    },
    deptIdChange(val) {
      let a = "";
      if (this.$refs.myCascader.getCheckedNodes()[0]) {
        a = this.$refs.myCascader.getCheckedNodes()[0].value;
        this.UserResourceForm.deptId = a;
        this.getUserList(a);
      } else {
        this.UserResourceForm.deptId = "";
      }
    },
    // 获取部门员工列表
    getUserList(deptId) {
      let _this = this;
      this.$http
        .get(`/sys/user/deptUserList`, {
          params: {
            deptId: deptId,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.maintainList = res.data;
        })
        .catch(() => {});
    },
    //确定分配
    distributionFun() {
      let _this = this;
      this.$http
        .post(
          "//sys/user/updateUserResource",
          {},
          {
            params: this.AgentForm,
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("修改成功！");
          _this.Agentvisible = false;
          _this.getHouseAgent();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "修改失败",
          });
        });
    },
  },
};
</script>
